<template>
  <table class="layui-table">
    <colgroup>
      <col width="150">
      <col width="150">
      <col>
    </colgroup>
    <thead>
      <tr>
        <th>集合名</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item ,index) in allTables" :key="index">
        <td>{{ item }}</td>
        <td><button @click="openDemoDialog(item)">查看</button></td>
        </tr>
    </tbody>
  </table>
  <demoDialog ref="demoDialogRef" :tableData="tableDataFromApi"  @submit="handleSubmit"></demoDialog>

</template>

<script setup>
import { ref, onMounted, provide } from 'vue'
import { listForm, tables, getCollection } from '@/utils/api.js'
import demoDialog from '@/components/demoDialog.vue'

const tableData = ref([])
const allTables = ref([])
const tableDataFromApi = ref([]) // 添加一个引用变量来存储从 API 获取的集合数据

onMounted(() => {

  listForm().then((resp) => {
    for (var i = 0; i < resp.data.data.length; i++) {
      tableData.value.push(resp.data.data[i])
    }
  })

  tables().then((resp) => {
    for (var i = 0; i < resp.data.data.length; i++) {
      allTables.value.push(resp.data.data[i])
    }
  })

  

})
let demoDialogRef = ref()
provide('tableData', tableDataFromApi)
const openDemoDialog = (item) => {
  getCollection(item).then((resp) => {
    tableDataFromApi.value = resp.data.data // 将获取的集合数据存入引用变量中
    // console.log(tableDataFromApi.value)
    demoDialogRef.value.show();
  })
  // demoDialogRef.value.show();
  // demoDialogRef.value.tableData = item; // 将当前点击的表名对应的数据传递给子组件
}
const handleSubmit= (data) => {
  console.log(data)
}

</script>

<style>
#formframe {
  padding: 20px;
}
.alert{
  display: none;
}
</style>
